<template>
  <!-- 投资者关系 -->
  <div class="investors">
    <div class="investors-detail">
      <div
        class="investors-image"
        :style="{
          '--investors-image_pc': 'url(' + data?.webhomeimg + ')',
          '--investors-image_mobile': 'url(' + data?.mobilehomeimg + ')',
        }"
      ></div>
      <div class="investors-info" v-if="stock">
        <div class="investors-description">
          {{ data?.description }}
        </div>
        <div class="investors-stockCode">
          {{ stock?.stock_name + "" + stock?.stock_num }}
        </div>

        <div
          class="investors-stockPrice"
          :class="{
            'investors-stockPrice_up': stock?.status,
            'investors-stockPrice_down': !stock?.status,
          }"
        >
          <span class="investors-stockPrice-amount">
            {{ stock?.stock_price }}
          </span>
          <span class="investors-stockPrice-text">
            元
            {{
              (stock?.stock_gain >= 0 ? "+" : "") +
              stock?.stock_gain +
              " (" +
              stock?.stock_gain_per +
              ")"
            }}
          </span>
        </div>

        <div class="investors-notice">
          <router-link to="/investorsNotice" class="investors-notice-item">
            <img
              class="investors-notice-item-icon"
              src="@/assets/image/home/ic_notice.png"
            />
            <div to="/investorsNotice" class="investors-notice-item-name">
              {{ getNavInfo("investorsNotice").name }}
            </div>
          </router-link>
          <router-link class="investors-notice-item" to="/investorsReport">
            <img
              class="investors-notice-item-icon"
              src="@/assets/image/home/ic_report.png"
            />
            <div class="investors-notice-item-name">
              {{ getNavInfo("investorsReport").name }}
            </div>
          </router-link>
        </div>

        <div class="investors-phone">
          {{ data?.hotline }}
        </div>
      </div>
    </div>

    <div class="investors-slogan">
      {{ data?.bdescription_1 }} / {{ data?.bdescription_2 }} /
      {{ data?.bdescription_3 }} / {{ data?.bdescription_4 }}
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  computed: {
    ...mapGetters("common", ["getNavInfo"]),
  },
  props: {
    data: Object,
  },
  data() {
    return {
      stock: null,
    };
  },

  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const result = await this.$request.get(
          "/Investorservices/stockInformation"
        );

        //涨跌 加标识字段
        if (result.data.stock_gain >= 0) {
          result.data["status"] = true;
        } else {
          result.data["status"] = false;
        }
        this.stock = result.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.investors {
  transition: all 500ms;
  position: relative;
  background-size: 300px 100px, cover;
  background-position: center 91px, center;
  background-repeat: no-repeat;
  background-image: url("~@/assets/image/home/investors_title.png"),
    url("~@/assets/image/home/investors_bg.png");
  height: 768px;

  &-detail {
    height: 447px;
    max-width: 1200px;

    margin: auto;
    position: relative;
    top: 200px;
  }

  &-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 659px;
    height: 447px;
    z-index: 12;
    background-size: cover;
    background-image: var(--investors-image_pc);
  }

  &-info {
    position: absolute;
    z-index: 11;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 984px;
    height: 447px;
    background-size: 984px 321px;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url("~@/assets/image/home/investors_right.png");
    display: flex;
    flex-direction: column;
  }

  &-description {
    position: absolute;
    left: 420px;
    top: 34px;
    width: 560px;
    font-size: 18px;
    color: #fff;
  }

  &-stockCode {
    position: absolute;
    left: 420px;
    top: 70px;
    width: 560px;
    font-size: 42px;
    color: #fff;
  }

  &-stockPrice {
    position: absolute;
    left: 420px;
    top: 160px;
    // width: 560px;
    // display: flex;
    // align-items: baseline;
    padding-right: 40px;
    background-size: 26px 26px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 20px;
    font-family: "微软雅黑";

    &_up {
      color: #d60000;
      background-image: url("~@/assets/image/investors/rise.png");
    }
    &_down {
      color: #50bc0f;
      background-image: url("~@/assets/image/investors/fall.png");
    }

    &-amount {
      // line-height: 40px;
      font-size: 40px;
      font-weight: bold;
    }

    &-text {
      // line-height: 28px;
      font-size: 28px;
      font-weight: bold;
    }
  }

  &-notice {
    position: absolute;
    left: 420px;
    top: 248px;
    display: flex;
    align-items: center;

    &-item {
      width: 180px;
      height: 36px;
      background: #fff;
      border-radius: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: color.$base;
      margin-right: 10px;

      &-icon {
        width: 28px;
        height: 28px;
        display: block;
      }

      &-name {
        margin-left: 4px;
        font-size: 18px;
      }
    }
  }

  &-phone {
    position: absolute;
    left: 420px;
    top: 330px;
    background-image: url("@/assets/image/home/ic_tel.png");
    background-size: 34px 34px;
    background-position-y: center;
    background-repeat: no-repeat;
    padding-left: 48px;
    font-size: 26px;
    color: #fff;
    font-weight: bold;
    font-family: "微软雅黑";
  }

  &-slogan {
    position: absolute;
    bottom: 50px;
    width: 100%;
    text-align: center;
    letter-spacing: 26px;
    font-size: 26px;
    color: rgba($color: #fff, $alpha: 0.9);
  }
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 1200px) {
  .investors {
    background-size: fn.rpx(300) fn.rpx(100), cover;
    background-position: center fn.rpx(70), center;
    background-image: url("~@/assets/image/home/investors_title.png"),
      url("~@/assets/image/investors/m_investors_bg.png");
    width: fn.rpx(750);
    height: fn.rpx(1026);

    &-detail {
      top: fn.rpx(250);
      height: fn.rpx(764);
    }

    &-image {
      position: absolute;
      top: 0;
      right: 0;
      bottom: auto;
      width: fn.rpx(646);
      height: fn.rpx(311);
      background-image: var(--investors-image_mobile);
    }

    &-info {
      left: 0;
      right: initial;
      top: initial;
      bottom: fn.rpx(30);
      width: fn.rpx(728);
      height: fn.rpx(364);
      background-size: fn.rpx(728) fn.rpx(364);
      background-image: url("~@/assets/image/investors/m-h-right.png");
    }

    &-description {
      left: fn.rpx(70);
      top: fn.rpx(-40);
      font-size: fn.rpx(18);
      width: fn.rpx(610);
    }

    &-stockCode {
      left: fn.rpx(70);
      top: fn.rpx(14);
      font-size: fn.rpx(42);
    }

    &-stockPrice {
      left: fn.rpx(70);
      top: fn.rpx(114);
      padding-right: fn.rpx(40);
      background-size: fn.rpx(26) fn.rpx(26);
      background-repeat: no-repeat;
      background-position-x: right;
      background-position-y: bottom;
      height: fn.rpx(40);
      line-height: fn.rpx(40);

      &-amount {
        font-size: fn.rpx(40);
      }

      &-text {
        font-size: fn.rpx(26);
      }
    }

    &-notice {
      left: fn.rpx(70);
      top: fn.rpx(210);

      &-item {
        width: fn.rpx(186);
        height: fn.rpx(40);

        &-icon {
          width: fn.rpx(25);
          height: fn.rpx(25);
        }

        &-name {
          font-size: fn.rpx(20);
        }
      }
    }

    &-phone {
      left: fn.rpx(70);
      top: fn.rpx(304);
      background-size: fn.rpx(34) fn.rpx(34);
      background-position-y: center;
      background-repeat: no-repeat;
      padding-left: fn.rpx(70);
      font-size: fn.rpx(32);
      color: #fff;
    }

    &-slogan {
      top: fn.rpx(200);
      letter-spacing: fn.rpx(8);
      font-size: fn.rpx(20);
      height: fit-content;
    }
  }
}
</style>